<template>
	<view class="main">
		<u-navbar :autoBack='true' title="更多搜索结果" :titleStyle='titleStyle' :placeholder='true' bgColor='transparent'>
			<view slot="right" class="header-right">
				<image style="margin-right: 30rpx;" @click="topage('/pages/ring/question')"
					src="../../static/ring/chart/wenhoa.png" mode="">
				</image>
				<image src="../../static/ring/chart/hefu.png" @click="topage('/pages/ring/connect-kefu')" mode="">
				</image>
			</view>
		</u-navbar>

		<view class="other">
			<view class="other-list">
				<view class="other-item" v-for="(item,i) in mainList" :key="i">
					<image class="big-img" src="../../static/ring/chart/jiezhi2.png" mode=""></image>
					<view class="center">
						<view class="title">
							Relaverse R1 1124
						</view>
						<view class="">
							<text class="address">a0:a0:a0:a0:a0:a0</text>
							<image src="../../static/ring/chart/xinhao.png" mode=""></image>
						</view>
					</view>
					<view class="btn">
						连接
					</view>
				</view>

			</view>

			<image class="no-more" src="../../static/ring/chart/meiyoufgengduo.png" mode=""></image>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				mainList: [{}, {}],
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: '500'
				},
			}
		},
		methods: {
			topage(url) {
				uni.navigateTo({
					url
				})
			},

		},
	}
</script>
<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color: #bbdcf5;
		background-image: url('../../static/ring/chart/connectbg.png');
		background-repeat: no-repeat;
		background-size: 100% auto;

		.header-right {
			display: flex;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.no-more {
			width: 660rpx;
			height: 28rpx;
		}

		.other {
			padding: 0 33rpx;

			.other-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				margin-bottom: 22rpx;
			}

			.other-list {
				.other-item {
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;

					.big-img {
						width: 96rpx;
						height: 96rpx;
						margin-right: 12rpx;
					}

					.center {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.title {
							font-size: 28rpx;
							font-weight: 500;
						}

						.address {
							font-size: 24rpx;

						}

						image {
							width: 36rpx;
							height: 23rpx;
							margin-left: 8rpx;
						}
					}

					.btn {
						text-align: center;
						width: 200rpx;
						height: 68rpx;
						line-height: 68rpx;
						border-radius: 20rpx;
						background: rgba(35, 89, 248, 1);
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);

					}
				}

				.other-more {
					margin-top: 40rpx;
					margin-bottom: 40rpx;
					font-size: 28rpx;
					justify-content: center;
					color: #2359F8;

					text {
						padding-right: 12rpx;
					}
				}
			}
		}


	}
</style>